<template>
  <div class="app-container">
    <div class="content">
      <div class="contentBox">
        <div class="search">
          <el-form
            :inline="true"
            :model="searchFrom"
            class="demo-form-inline"
            id="searchFrom"
          >
            <!-- <el-form-item>
              <el-input
                v-model="searchFrom.productModel"
                placeholder="请输入产品型号"
                clearable
              />
            </el-form-item> -->

            <el-form-item>
              <el-tree-select
                v-model="searchFrom.orgId"
                :data="department"
                :props="{
                  value: 'id',
                  label: 'label',
                  children: 'children'
                }"
                :height="208"
                placeholder="选择部门"
                clearable
                :disabled="needDisabled"
              />
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="searchFrom.searchTime"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="日期起"
                end-placeholder="日期止"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searchFrom.title"
                placeholder="请输入标题"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searchFrom.number"
                placeholder="请输入单据编号"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit"
                ><el-icon><Search /></el-icon>查询</el-button
              >
              <el-button type="default" @click="resetSearchFrom"
                ><el-icon><RefreshLeft /></el-icon>重置</el-button
              >
            </el-form-item>
          </el-form>
          <div class="mb-15px">
            <el-button type="primary" @click="addRow"
              ><el-icon><Plus /></el-icon>新建</el-button
            >
            <!-- <el-button type="primary" plain @click="editRiw">
              <el-icon><Edit /></el-icon>编辑</el-button
            > -->
            <!-- <el-button @click="deleteRow" type="primary" plain
              ><el-icon><DeleteFilled /></el-icon>删除</el-button
            > -->
          </div>
        </div>
        <div class="tableBox">
          <el-table
            :data="dataList"
            border
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-dblclick="goPage"
          >
            <!-- <el-table-column
              type="selection"
              width="55"
              align="center"
            ></el-table-column> -->

            <!-- <el-table-column prop="productModel" label="产品型号" />
            <el-table-column
              prop="productNum"
              label="数量"
              align="center"
              width="70"
            /> -->
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="单据编号" prop="number"></el-table-column>
            <el-table-column prop="processState" label="审批状态" width="180">
              <template #default="scope">
                <!-- <dict-drop
                  :options="process_approve_status"
                  :value="scope.row.checkStatus"
                /> -->
                <div v-if="scope.row.processState">
                  <span
                    class="dict-drop"
                    :class="
                      scope.row.processState === '审批通过' ? 'pass' : 'ing'
                    "
                  ></span>
                  {{ scope.row.processState }}
                </div>
                <div v-else>
                  <span class="dict-drop ing"></span>
                  {{ '暂未发起审批' }}
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="orgName" label="申请单位" align="center" />
            <el-table-column prop="deptName" label="申请部门" align="center" />
            <el-table-column
              prop="createName"
              label="申请人"
              width="100"
              align="center"
            />
            <el-table-column
              prop="createTime"
              label="申请时间"
              width="160"
              align="center"
            />
            <el-table-column label="操作" align="center" :width="230">
              <template #default="scoped">
                <el-button
                  type="primary"
                  plain
                  size="small"
                  @click="goPage(scoped.row, 'edit')"
                  v-if="userStore.userInfo.userName == scoped.row.createBy"
                  ><el-icon><Edit /></el-icon>编辑</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="small"
                  @click="deleteRow(scoped.row)"
                  v-if="
                    scoped.row.processState == '流程未发起' &&
                    (userStore.roles.includes('admin') ||
                    userStore.roles.includes('swgl')
                      ? true
                      : userStore.userInfo.userName == scoped.row.createBy)
                  "
                  ><el-icon><DeleteFilled /></el-icon>删除</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="small"
                  @click="goPage(scoped.row, 'detail')"
                  ><el-icon><View /></el-icon>查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="searchFrom.total > 0"
            :total="searchFrom.total"
            v-model:page="searchFrom.pageNum"
            v-model:limit="searchFrom.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="ApplicationList">
import {
  getApplicationList,
  deleteApplication,
  getApplicationDetailExt,
  getApplicationDetail
} from '@/api/salesManage/application'
import router from '@/router'
import useCommonStore from '@/store/modules/common'
import useUserStore from '@/store/modules/user'

const commonStore = useCommonStore()
const userStore = useUserStore()
const { proxy } = getCurrentInstance()
const searchFrom = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  orgId: userStore.userInfo.orgId
})
const dataList = ref([])
const department = ref()
// 省公司 查看全部 / 分公司 无法筛选
const needDisabled = computed(() => {
  return userStore.userInfo.orgId != '484'
})
function getList(param) {
  const params = {
    ...searchFrom.value,
    ...param
  }
  if (params.searchTime && params.searchTime.length > 0) {
    params.searchBeginTime = params.searchTime[0]
    params.searchEndTime = params.searchTime[1]
    // delete params.searchTime
  }
  getApplicationList(params).then(res => {
    if (res.code == 200) {
      dataList.value = res.data.records
      searchFrom.value.total = res.data.total
    }
  })
}
getList()

function addRow() {
  router.push({ path: '/source/sourceModules/application' })
}

function editRiw() {}
async function init() {
  department.value = await commonStore.getCompanyData()
}
init()
function deleteRow(row) {
  proxy.$modal.confirm('是否确认删除该数据').then(() => {
    deleteApplication({ formId: row.formId }).then(res => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess('删除成功')
        getList()
      }
    })
  })
}

function handleSelectionChange() {}
function goPage(row, type) {
  if (type === 'edit') {
    router.push({
      path: '/source/sourceModules/applicationEdit',
      query: { formId: row.formId, proInsId: row.processId }
    })
  } else {
    router.push({
      path: '/source/sourceModules/applicationDetail',
      query: { formId: row.formId, proInsId: row.processId }
    })
  }
}

function onSubmit() {
  getList()
}
function resetSearchFrom() {
  searchFrom.value = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    orgId: userStore.userInfo.orgId
  }
  getList()
}
</script>

<style scoped lang="scss">
.dict-drop {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.pass {
  background-color: #67c23a;
}
.ing {
  background-color: #e6a23c;
}
:deep(.textCenter) {
  text-align: center !important;
}
</style>
